<template>
    <div style="margin-left:16px">
          <el-skeleton animated :rows="16" :loading="data.isFirst">
  <el-descriptions title="预约" direction="vertical" :column="2" border>
                  
                   
                    <el-descriptions-item fixed label="预约日期*" :rowspan="9">
                        <el-calendar ref="calendar" v-model="data.date">
    <template #header="{ date }">
        
      <span></span>
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">
          上一年
        </el-button>
        <el-button size="small" @click="selectDate('prev-month')">
         上个月
        </el-button>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('next-month')">
          下个月
        </el-button>
        <el-button size="small" @click="selectDate('next-year')">
          下一年
        </el-button>
      </el-button-group>
      
    </template>
  </el-calendar>
                    </el-descriptions-item>
                         <el-descriptions-item fixed label="项目名称">
                     
                            <el-select
                            v-model="data.xm"
                            placeholder="请选择"
                             size="large"
                            style="width: 240px"
                            >
                            <el-option
                        v-for="item in data.xmlist"
                        :key="item.id"
                            :label="item.name"
                        :value="item.id"
                        />
                            </el-select>
                    </el-descriptions-item>
                  

                         <el-descriptions-item fixed label="预约时间">
                     
                         <el-time-picker v-model="data.time" placeholder="Arbitrary time" />
                    </el-descriptions-item>



                      <el-descriptions-item fixed label="客户名称">
                      <el-select v-model="data.kh"  filterable remote reserve-keyword style="width:220px"
                        placeholder="请输入关键词" :remote-method="event.khdata" :loading="data.khloading">
                        <el-option v-for="item in data.khlist" :key="item.id" :label="item.name"
                            :value="item.id">
                           {{ item.name }}
                        </el-option>   
                    </el-select>
                    </el-descriptions-item>
                       <el-descriptions-item fixed label="技师名称" width="600">
                        <el-select v-model="data.js"  filterable remote reserve-keyword style="width:220px"
                        placeholder="请输入关键词" :remote-method="event.remoteMethod" :loading="data.jsloading">
                        <el-option v-for="item in data.jslist" :key="item.id" :label="item.name"
                            :value="item.id">
                           {{ item.name }}
                        </el-option>   
                    </el-select>
                     
                    </el-descriptions-item>
                      <el-descriptions-item fixed label="操作">
                        <el-button type="success" @click="event.add">确认</el-button>
                    </el-descriptions-item>
                  
                  
                </el-descriptions>
          </el-skeleton>

          
    </div>
     
</template>

<script setup lang="ts">
import {reactive,watchEffect} from 'vue';
import type {Reservation_Index_Data} from '../../utils/types';
import dayjs from 'dayjs';

import {Get_Product,Get_User,Get_Customer,Add_Reservation} from '../../api/reservation/index'
import { msg } from '@/utils/msg'
import router from '@/router';
import { ref } from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { closeloading, startloading } from '@/utils/loading';
const calendar = ref<CalendarInstance>()
const data=reactive<Reservation_Index_Data>({
    isFirst:false,
    data:[],
    loading:false,
    key:'',
    pages:{
        page:1,
        limit:10,
        total:0
    },
   time:"",
   drawer:false,
   xm:"",
   js:"",
   xmlist:[],
   jslist:[],
   jsloading:false,
   kh:"",
   khlist:[],
   khloading:false,
   date:""
   
   
})
const event={
  async add(){
    const convertedDate = dayjs(data.date).format('YYYY-MM-DD')+" "+dayjs(data.time).format('HH:mm:ss');
    if(data.kh==""){
         msg({
            message:"请选择预约的客户"
        })
         return;
    }
      if(data.js==""){
         msg({
            message:"请选择客户预约的技师"
        })
         return;
    }
    startloading();
    const res=await Add_Reservation({
        cid:data.kh,
        time:convertedDate,
        uid:data.js,
        pid:data.xm
    })
   
    if(res.code===0){
          msg(res);
    setTimeout(() => {
         router.push('/reservation/reservation');
    }, 1000);
       }
 closeloading();
  

   },

  

  async khdata(key:string){
    
    data.khloading=true;
        const res=await Get_Customer({
            key:key
        });
        data.khlist=res.data;
        data.khloading=false;

   },
  saveduty(){

  },
 async aaa(){
    
    
   
   
//   

    
     
  },
  async remoteMethod(key:string){
       if(data.time==""){
        msg({
            message:"请选择预约时间"
        })
         return;
    }
    if(data.xm==""){
        msg({
            message:"请选择需要做的项目"
        })
         return;
    }
  
   const convertedDate = dayjs(data.date).format('YYYY-MM-DD');
   const aa=dayjs(data.time).format('HH:mm:ss');
   const time=convertedDate+" "+aa;
   
    data.jsloading=true;
    
    const res=await Get_User({
        time:time,
        xm:data.xm,
        key:key
    });
    data.jslist=res.data;
    data.jsloading=false;
   
  },
 

 
}
const method={
   async bind(){
    data.isFirst=true;
        const res=await Get_Product();
        data.xmlist=res.data;
        const currentDate = new Date();
        data.date=currentDate.toString();
        data.isFirst=false;
    }
}


const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

watchEffect(()=>{
    method.bind();
   
})
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
}

.duty_head {
    margin: 10px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
}

.duty_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 3;
    line-height: 50px;
}

.duty_main {
    margin: 8px;
}
</style>